<template>
  <div class="header">
    <div class="item"></div>
    <div class="item list">
      <ul>
        <li><RouterLink to="/home/blog">博客</RouterLink></li>
        <li><RouterLink to="/home/announcement">公告</RouterLink></li>
        <li><RouterLink to="/home/categories">分类</RouterLink></li>
        <li><RouterLink to="/home/message-board">留言板</RouterLink></li>
      </ul>
    </div>
    <div class="item search"></div>
    <div class="item userinfo">
      <img src="../../../public/acvite.jpg" alt="" />
      <span>陈三愿</span>
      <span class="setting">
        <img src="../../assets/icon/header/setting.png" alt="" />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink } from "vue-router";
</script>

<style lang="scss" scoped>
.header {
  height: 70px;
  width: 100%;
  background-color: global.$primary-component-background-color;
  display: flex;
  .item {
    width: 20%;
    text-align: center;
    align-self: center;
  }
  .list {
    width: 30%;
    ul {
      display: flex;
      width: 100%;
      li {
        list-style: none;
        width: 25%;
        color: global.$primary-tab-color;
        a {
          display: block;
          width: 100%;
          height: 100%;
          text-decoration: none;
          color: inherit;
        }
      }
    }
  }
  .search {
    width: 30%;
  }
  .userinfo {
    box-sizing: border-box;
    height: 70px;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    img {
      width: 40px;
      height: 40px;
      border-radius: 60px;
    }
    span {
      margin-left: 10px;
      line-height: 40px;
      text-align: left;
    }
    .setting {
      flex: 1;
      box-sizing: border-box;
      padding: 5px 0;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
